<template>
    <div>
        <van-action-sheet v-model="sheetShow" :title="title ? title : '分享商品'">
            <div class="popup-hide1 show">
                <div class="popup-box">
                    <div class="popup-con share-goods">
                        <slot name="top"></slot>
                        <slot name="des"></slot>
                        <div class="share-way">
                            <div
                                v-for="(item, index) in shareTypeArr"
                                :key="index"
                                class="item"
                                :class="!isWx && item.type == 'wx' ? 'block' : 'none'"
                                @click="oauth(item.type)"
                            >
                                <div>
                                    <div class="img">
                                        <img :src="item.img" alt="" />
                                    </div>
                                    <span class="txt">{{ item.text }}</span>
                                </div>
                            </div>
                        </div>
                        <slot name="bottom"></slot>
                    </div>
                </div>
            </div>
        </van-action-sheet>

        <div class="fullguide" @click="closeShare" v-if="popupShare">
            <i class="fullguide__arrow"></i>
            <div class="fullguide__inner fullguide__inner--for-share">
                <div class="fullguide-share">
                    <p class="fullguide-share__one">立即分享给好友吧</p>
                    <p class="fullguide-share__two">点击屏幕右上角将本页面分享给好友</p>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import { ActionSheet } from 'vant'
import { getUa } from 'utils/utils'
export default {
    props: {
        title: {
            type: String,
            default: ''
        },
        prames: {
            type: Object,
            default: {}
        },
        shareType: {
            type: Array,
            default: (value) => {
                return [
                    { type: 'link', text: '复制链接', img: require('@/assets/images/ext-link.png') },
                    { type: 'wx', text: '分享好友', img: require('@/assets/images/ext-wx.png') },
                    { type: 'img', text: '图文', img: require('@/assets/images/ext-img.png') }
                ]
            },
            required: false
        }
    },
    data() {
        return {
            sheetShow: false, //弹起分享
            isWx: getUa().isWeixin,
            popupShare: false,
            filters: ['link', 'wx', 'img'], //默认这几个配置
            shareTypeArr: this.shareType
        }
    },
    mounted() {},
    watch: {
        shareType: {
            handler(val) {
                val = Array.isArray(val) ? val : []
                if (val.length == 0) {
                    this.shareTypeArr = [
                        { type: 'link', text: '复制链接', img: require('@/assets/images/ext-link.png') },
                        { type: 'wx', text: '分享好友', img: require('@/assets/images/ext-wx.png') },
                        { type: 'img', text: '图文', img: require('@/assets/images/ext-img.png') }
                    ]
                } else {
                    let filterBox = []
                    val.filter((item) => {
                        if (this.filters.indexOf(item.type) != -1) {
                            filterBox.push({
                                type: item.type,
                                text: this.getshareText(item.type),
                                img: require(`@/assets/images/ext-${item.type}.png`)
                            })
                        }
                    })
                    this.shareTypeArr = filterBox
                }
            },
            immediate: true
        }
    },
    methods: {
        getshareText(val) {
            switch (val) {
                case 'link':
                    return '复制链接'
                    break
                case 'wx':
                    return '分享好友'
                    break
                case 'img':
                    return '图文'
                    break
            }
        },
        oauth(value) {
            let that = this
            if (value == 'link') {
                this.$copyText(this.prames.shareText).then(
                    function (e) {
                        that.$toast.success({
                            message: '内容已复制',
                            duration: 1000
                        })
                        that.sheetShow = false
                    },
                    function (e) {
                        that.$toast.fail({
                            message: '内复制失败',
                            duration: 1000
                        })
                        that.sheetShow = false
                    }
                )
            } else if (value == 'wx') {
                this.wxShare()
            } else {
                this.picPoster()
            }
        },

        wxShare() {
            this.popupShare = true
            this.sheetShow = false
        },
        picPoster() {
            this.sheetShow = false
            this.$parent.posterShow = true
            if (!this.$parent.posterDataUrl) {
                this.$parent.createQRCode()
            }
        },
        closeShare() {
            this.popupShare = false
        }
    }
}
</script>
<style src="../../assets/css/detail.css" scoped></style>
<style lang="stylus" scoped>
.share {
        position: fixed;
        right: 10px;
        width: 35px;
        bottom: 115px;
        height: 35px;
        border-radius: 50%;
        font-size: 0;
        cursor: pointer;
        line-height: 35px;
        text-align: center;
    }
    .share img {
        width: 35px;
        height: 35px;
    }

    .popup-hide .popup-con.share-goods {
        min-height: 140px;
    }
    .share-goods .share-value {
        font-size: 14px;
        margin-top: 15px;
        margin-bottom: -5px;
        padding: 0 15px;
        line-height: 20px;
    }
    .share-goods .share-value .price {
        margin: 0 3px;
    }
    .share-goods .share-des {
        padding: 0 15px;
        color: #999;
        line-height: 20px;
        font-size: 12px;
        margin-top: 15px;
    }
    .share-goods .share-way {
        display: -webkit-flex;
        display: -webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        display: flex;
    }
    .share-goods .share-way .item {
        -webkit-flex: 1;
        -ms-flex: 1;
        -webkit-box-flex: 1;
        -moz-box-flex: 1;
        flex: 1;
        text-align: center;
        padding: 15px 0 15px;
    }
    .share-goods .share-way .item button[plain] {
        padding:0 !important;
        border:1px solid transparent !important;
    }
    .share-goods .share-way .item button::after {
        border: none !important;
    }
    .share-goods .share-way .item .img {
        border-radius: 50%;
        width: 50px;
        height: 50px;
        line-height: 50px;
        margin: auto;
        font-size: 0;
    }
    .share-goods .share-way .item .img img {
        width: 100%;
        height: 100%;
    }
    .share-goods .share-way .item .txt {
        margin-top: 10px;
        font-size: 14px;
    }
    .share-goods .share-btn {
        margin: 0 15px 15px;
    }
    .share-goods .share-btn .btn {
        display: block;
        width: 100%;
        height: 38px;
        line-height: 36px;
        font-size: 14px;
        text-align: center;
        border-radius: 36px;
        color: #ffffff;
        border: 1px solid transparent;
    }

    .none {
        display: block
    }
    .block {
        display: none
    }
    .van-action-sheet__close {
        font-size: 16px;
    }
</style>
